import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/model/cookstep_list_model.dart';
import 'package:flutter_douban/model/store_commit_mode.dart';
import 'package:flutter_douban/tool_views/cached_network_Image.dart';
import 'package:flutter_douban/tool_views/photo_ViewScreen.dart';
import 'package:flutter_douban/tool_views/router.dart';

class ProductDetailCommitCell extends StatefulWidget {
  final StoreCommitModel model;

  const ProductDetailCommitCell({Key? key, required this.model})
      : super(key: key);

  @override
  _ProductDetailCommitCellState createState() =>
      _ProductDetailCommitCellState();
}

class _ProductDetailCommitCellState extends State<ProductDetailCommitCell> {


  @override
  Widget build(BuildContext context) {
    List<CookStepListModel> _dataList = [];
    widget.model.images!.forEach((element) {
      /// 大图浏览模式需要数据
      _dataList.add(CookStepListModel('', element['i'], 0, 0, '', ''));
    });

    return Container(
      padding: EdgeInsets.only(left: 0, right: 0, top: 10, bottom: 10),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _avatar(),
              _btn(),
            ],
          ),
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(left: 40, right: 0, top: 5),
            child: Text(
              widget.model.des!,
              style: TextStyle(
                fontSize: 16,
                color: AppColors.black,
              ),
            ),
          ),

          Container(
            margin: EdgeInsets.only(left: 40, right: 0, top: 10),
            child: GridView.builder(
                itemCount: _dataList.length,
                primary: false,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  //横轴元素个数
                    crossAxisCount: 4,
                    //纵轴间距
                    mainAxisSpacing: 1.0,
                    //横轴间距
                    crossAxisSpacing: 6.0,
                    //子组件宽高长度比例
                    childAspectRatio: 1.0),
                itemBuilder: (BuildContext context, int index) {
                  return _ImageWiget(index,_dataList);
                }),
          ),

          SizedBox(height: 19,),
          Container(
            height:1,
            color: AppColors.page,
            margin: EdgeInsets.only(left: 20,right: 20),
          ),
        ],
      ),
    );
  }


  /// 图片
  Widget _ImageWiget(int index,List dataList){
    return ClipRRect(
      child: InkWell(
        child: CachedImage(
          width: (MediaQuery.of(context).size.width-120)/4,
          height: (MediaQuery.of(context).size.width-120)/4,
          url: dataList[index].image!,
        ),
        /// 点击图片大图浏览
        onTap: (){
          Navigator.of(context).push(new FadeRouter(
              child: PhotoViewGalleryScreen(
                index: index,
                dataArr: dataList,
              ),
              duration_ms: 500));
        },
      ),
      borderRadius: BorderRadius.circular(8),
    );
  }

  /// 头像
  Widget _avatar() {
    return Row(
      children: [
        Container(
          width: 34,
          height: 34,
          decoration: BoxDecoration(
            color: AppColors.page,
            borderRadius: BorderRadius.circular(17),
          ),
          child: ClipOval(
            child: FadeInImage.assetNetwork(
              placeholder: 'assets/images/common/lazy-1.png',
              image: widget.model.a!.p!,
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(
          width: 8,
        ),
        _centerview(),
      ],
    );
  }

  /// 中间内容
  Widget _centerview() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text(
              widget.model.a!.n!,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.bold,
                color: AppColors.black,
              ),
            ),
            SizedBox(
              width: 8,
            ),
            Text(
              'LV.${widget.model.a!.lv.toString()}',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  fontSize: 11,
                  color: AppColors.yellow,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold),
            ),
          ],
        ),
        SizedBox(
          height: 3,
        ),
        Text(
          widget.model.ct!,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 12,
            color: AppColors.qianTextColor,
          ),
        ),
      ],
    );
  }

  /// 好评按钮
  Widget _btn() {
    return Container(
      child: Text(
        '好评',
        style: TextStyle(
          color: AppColors.danger,
          fontSize: 15,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}
